<template>
	<page-wraper>
		<view>
			<wd-img width="100%" :height="280" src="https://www.ytad-pep.com/bg.jpg" />

			<view class="custom-card" style="padding-top: 10px; margin-top: 10px;">
				<view style="margin-bottom: 10px;">忘记密码</view>
				<wd-form ref="form" :model="model" errorType="toast">
					<wd-cell-group border>
						<wd-input label="电子邮箱" label-width="90px" prop="email" clearable v-model="model.email"
							placeholder="请填写电子邮箱" :rules="[{ required: true, message: '请填写电子邮箱' }]" />
						<wd-input label="邮箱验证码" label-width="90px" prop="verifycode" v-model="model.verifycode"
							:rules="[{ required: true, message: '请填写邮箱验证码' }]">
							<template #suffix>
								<wd-button size="small" custom-class="button" @click="getCode"
									:disabled="!model.email || sendCodeTimeout > 0">
									{{ sendCodeTimeout > 0 ? `获取验证码(${sendCodeTimeout}S)` : '获取验证码' }}
								</wd-button>
							</template>
						</wd-input>
						<input type="password" class="nonPwd" />
						<wd-input label="新密码" label-width="90px" prop="password" show-password clearable
							v-model="model.password" placeholder="请输入新密码"
							:rules="[{ required: true, message: '请填写新密码' }]" autocomplete="off" />
					</wd-cell-group>
				</wd-form>
			</view>

			<view style="padding: 10px 10px;">
				<wd-button type="primary" size="large" @click="handleSubmit" block>重置密码</wd-button>
				<wd-button type="default" size="small" @click="login" block custom-style="margin-top: 10px; color: var(--wot-button-primary-bg-color, var(--wot-color-theme, #4d80f0));">返回登录</wd-button>
			</view>
		</view>
	</page-wraper>
</template>
<script lang="ts" setup>
	import { useToast } from '@/uni_modules/wot-design-uni'
	import type { FormInstance } from '@/uni_modules/wot-design-uni/components/wd-form/types'
	import { reactive, ref } from 'vue'
	import { setToken } from '../../store'

	const { success: showSuccess, error: showError, loading: showLoading, close: closeToast } = useToast()
	const model = reactive<{
		email : string
		password : string,
		verifycode: string,
		sessionid: string
	}>({
		email: '',
		password: '',
		verifycode: '',
		sessionid: ''
	})
	const sendCodeTimeout = ref(0);

	const form = ref<FormInstance>()
	
	function login() {
		uni.redirectTo({
			url: '/pages/login/Index'
		})
	}
	
	function getCode() {
		if (!model.email) {
			showError('请先填写电子邮箱');
			return;
		}
	
		showLoading('正在发送验证码...');
	
		uni.$http.post('passport/send_verify_code-x', { email: model.email, flags: 1, verifycode: '1234' }).then(res => {
			closeToast();
	
			if (res.data.code == 0) {
				sendCodeTimeout.value = 60;
				model.sessionid = res.data.data;
	
				var timer = setInterval(() => {
					sendCodeTimeout.value--;
	
					if (sendCodeTimeout.value == 0) {
						clearInterval(timer);
					}
				}, 1000);
	
				showSuccess('验证码已发送');
			} else {
				showError(res.data.msg);
			}
		});
	}

	function handleSubmit() {
		form
			.value!.validate()
			.then(async ({ valid, errors }) => {
				if (valid) {
					showLoading('登录中...');

					const res = await uni.$http.post('passport/forget', {
						email: model.email,
						password: model.password,
						verifycode: model.verifycode,
						sessionid: model.sessionid
					});

					closeToast()
					
					model.sessionid = '';

					if (res.data.code == 0) {
						showSuccess({
							msg: res.data.msg,
							iconName: 'success',
							closed: () => {
								uni.redirectTo({
									url: '/pages/login/Index'
								})
							},
						})
					} else {
						showError(res.data.msg);
					}
				}
			})
			.catch((error) => {
				console.log(error, 'error')
			})
	}
</script>
<style lang="scss" scoped>
	.nonPwd {
		height: 1px;
		width: 1px;
	}
	
	.custom-card {
		padding: var(--wot-card-padding, 0 var(--wot-size-side-padding, 15px));
		background-color: var(--wot-card-bg, var(--wot-color-white, rgb(255, 255, 255)));
		line-height: var(--wot-card-line-height, 1.1);
		margin: var(--wot-card-margin, 0 var(--wot-size-side-padding, 15px));
		border-radius: var(--wot-card-radius, 8px);
		box-shadow: var(--wot-card-shadow-color, 0px 4px 8px 0px rgba(0, 0, 0, 0.02));
		font-size: var(--wot-card-fs, var(--wot-fs-content, 14px));
		padding-top: 5px;
		padding-bottom: 5px;
	}
</style>